<template>
	<view class="container">
		<!-- 搜索框 -->
		<uni-search-bar
			bgColor="#edeef0"
			placeholder="搜索"
			cancelButton="none"
			@confirm="search"
		/>

		<collapse-tree @treeItemClick="itemClick" :list="treeData" />

		<view class="anchor">
			<view class="anchor-title">党员列表</view>
			<uni-section
				v-for="(item, index) in anchorList"
				:key="index"
				:title="item.label"
			>
				<uni-list>
					<uni-list-item
						v-for="(v, i) in item.djUserList"
						:key="i"
						show-arrow
						clickable
						@tap="itemClick(v)"
					>
						<template v-slot:header>
							<view class="slot-box">
								<image class="slot-image" :src="v.avatar" @error="imageError(e, v)" />
							</view>
						</template>
						<template v-slot:body>
							<text class="slot-box slot-text">
								{{ v.userName }}
							</text>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { treeSelect, getUserByLetter } from '@/net/dangyuanguanli'
import collapseTree from '@/components/collapse-tree'

const search = res => {
	const keyword = res.value
	const title = `搜索“${keyword}”的结果为：`
	uni.navigateTo({ url: `./addressList?keyword=${keyword}&title=${title}` })
}

const treeData = ref([])
const anchorList = ref([])

const getTreeSelect = async () => {
	const res = await treeSelect()
	treeData.value = res.data
}
const getAnchorData = async () => {
	const res = await getUserByLetter()
	anchorList.value = res.data
}
const itemClick = item => {
	if (item.djUserId) {
		// 点击党员
		const { djUserId } = item
		uni.navigateTo({ url: `./userInfo?id=${djUserId}` })
	} else {
		// 点击党组织
		const { id, label } = item
		uni.navigateTo({ url: `./addressList?id=${id}&title=${label}` })
	}
}

const imageError = (e, item) => {
	item.avatar = '/static/avatar.png'
}

onMounted(() => {
	Promise.all([getTreeSelect(), getAnchorData()])
})
</script>

<style lang="scss" scoped>
@import '/static/common.scss';
.uni-section {
	background-color: transparent;
}
.anchor-title {
	line-height: 100rpx;
	padding: 0 30rpx;
	margin-top: 24rpx;
	color: #666;
	background-color: #fff;
}

:deep(.uni-section .uni-section-header) {
	padding: 12rpx 30rpx;
}

.anchor :deep(.uni-list-item__container) {
	padding: 30rpx;
}
</style>
